<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!-- <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
      <el-button size="mini"  class="filter-item" type="primary" icon="el-icon-download"><a href="https://rl-pri.oss-cn-shenzhen.aliyuncs.com/md/other/2020/7/2020-07-26/1595769036013_720.xls">导入模板下载</a></el-button>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreateExcelStudent">导入学员信息</el-button>
      <el-button size="mini" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出学员信息</el-button>
      <br> -->
      <!-- 课程类型 -->
      <div class="filter-container">
        <!--课程类型：-->
        <el-tag v-for="(tag,index) in tags" :key="tag.name" :class="bgindex === index?'active':''"
          style="cursor: pointer;margin-right: 10px" @click.native="tagclick(tag.cid,index)">
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="display: flex;">
        <el-input size="mini" v-model.trim="listQuery.name" clearable class="filter-item" style="width: 120px;"
          placeholder="请输入姓名" />
        <el-input size="mini" v-model.trim="listQuery.phone" clearable class="filter-item"
          style="width: 150px;margin-left: 10px;" placeholder="电话" />
        <el-input size="mini" v-model.trim="listQuery.idCard" clearable class="filter-item"
          style="width: 200px;margin-left: 10px;" placeholder="身份证" />
        <!--<br>-->
        <el-select size="mini" v-model.trim="listQuery.payStatus" style="width: 120px;margin-left: 10px;" clearable
          class="filter-item" placeholder="是否缴费">
          <el-option :value="0" label="未缴费" />
          <el-option :value="1" label="已缴费" />
        </el-select>
        <el-select size="mini" v-model.trim="listQuery.certificateStatus" style="width: 120px;margin-left: 10px;"
          clearable class="filter-item" placeholder="是否已获证">
          <el-option :value="0" label="未获得" />
          <el-option :value="1" label="已获得" />
        </el-select>
        <el-select size="mini" v-model.trim="listQuery.courseStatus" style="width: 120px;margin-left: 10px;"
          clearable class="filter-item" placeholder="是否已学完">
          <el-option :value="0" label="未学完" />
          <el-option :value="1" label="已学完" />
        </el-select>
        <el-select filterable size="mini" placeholder="选择企业" v-model="listQuery.companyId" clearable
          style="width: 200px;margin-left: 10px;">
          <el-option v-for="(item, index) in companyData" :key="index" :label="item.companyName" :value="item.id">
          </el-option>
        </el-select>
        <!-- <div style="width: 500px;">
          <defCity  @cityData="cityDataFun" size="mini" />
        </div> -->
        <el-button size="mini" style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search"
          @click="handleFilter">查找
        </el-button>
        <el-button size="mini" style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-edit"
          @click="allEdit">批量编辑
        </el-button>
      </div>
      <!-- <el-select v-model="listQuery.studentsType" clearable class="filter-item" placeholder="人员类型">
        <el-option :value="1" label="主要负责人"/>
        <el-option :value="2" label="管理人员"/>
        <el-option :value="3" label="从业人员"/>
      </el-select>
      <el-select v-model="listQuery.trainType" clearable class="filter-item" placeholder="培训类型">
        <el-option :value="1" label="新取证"/>
        <el-option :value="2" label="继续教育"/>
      </el-select>-->
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" border size="small" element-loading-text="正在查询中。。。"
      highlight-current-row @selection-change="handleBatchStudentOrderChange">
      <el-table-column type="selection" label="选择" width="45px" />
      <el-table-column align="left" label="企业信息" prop="certificateStatus" width="200px">
        <template slot-scope="scope">
          <div><span style="color: #0000ff;font-weight: bold;font-size: 14px;">名称：{{scope.row.companyName}}</span></div>
          <div><span style="color: #ff007f;font-weight: bold;">企业ID：{{scope.row.companyId}}</span></div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="用户行业信息" prop="name" width="140px">
        <template slot-scope="scope">
          <div><span style="color: #000000;font-weight: bold;">行业名称：{{scope.row.categoryName}}</span></div>
          <div><span style="color: #326496;font-weight: bold;">行业ID：{{scope.row.associatedIndustryId}}</span></div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="用户基本信息" prop="name" width="200px">
        <template slot-scope="scope">
          <div><span style="color: #0000ff;font-weight: bold;">姓名：<span
                style="font-size: 16px;">{{scope.row.name}}</span></span></div>
          <div><span style="color: #000000;font-weight: bold;">电话号码：{{scope.row.phone}}</span></div>
          <div><span style="color: #00aaff;font-weight: bold;">身份证：{{scope.row.idCard}}</span></div>
          <div><span style="color: #00aaff;font-weight: bold;">学员ID：{{scope.row.id}}</span></div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="教育情况" prop="name" width="130px">
        <template slot-scope="scope">
          <div><span style="color: #00aaff;font-weight: bold;">{{scope.row.courseTypeInfoString}}</span></div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="费用" prop="certificateStatus" width="100px">
        <template slot-scope="scope">
          <span style="color: #ff0000;font-weight: bold;">￥{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已播放学时(时:分:秒)" prop="certificateStatus" width="140px">
        <template slot-scope="scope">
          <span style="color: #ff0000;font-weight: bold;">{{scope.row.duration}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总学时(时:分:秒)" prop="certificateStatus" width="130px">
        <template slot-scope="scope">
          <span style="color: #1e9ef3;font-weight: bold;">{{scope.row.totalDuration}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="学时" prop="studyTime" width="120px" />
      <el-table-column align="center" label="过期时间" prop="expireTime" width="120px" format="yyyy 年 MM 月 dd 日 hh:mm:ss"
        value-format="yyyy-MM-dd hh:mm:ss" />

      <!--      <el-table-column align="center" label="学时" prop="courseType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.courseType===1" type="primary">16小时</el-tag>
          <el-tag v-if="scope.row.courseType===2" type="primary">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===3" type="success">16小时</el-tag>
          <el-tag v-if="scope.row.courseType===4" type="success">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===5" type="info">8小时</el-tag>
          <el-tag v-if="scope.row.courseType===6" type="info">4小时</el-tag>
        </template>
      </el-table-column>-->

      <!-- <el-table-column align="center" label="缴费情况" prop="payStatusString"/>
      <el-table-column align="center" label="取证情况" prop="certificateStatusString"/>-->

      <el-table-column align="center" label="缴费情况" prop="payStatus" width="120px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus===0" type="info">未缴费</el-tag>
          <el-tag v-if="scope.row.payStatus===1" type="success">已缴费</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="取证情况" prop="certificateStatus" width="120px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.certificateStatus===0" type="info">未取证</el-tag>
          <el-tag v-if="scope.row.certificateStatus===1" type="success">已取证</el-tag>
        </template>
      </el-table-column>


      <!-- <el-table-column align="center" label="人员类型" prop="studentsType" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.studentsType===1" type="primary">主要负责人</el-tag>
          <el-tag v-if="scope.row.studentsType===2" type="success">管理人员</el-tag>
          <el-tag v-if="scope.row.studentsType===3" type="info">从业人员</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="培训类型" prop="courseType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.courseType===1||scope.row.courseType===3||scope.row.courseType===5" type="primary">新取证</el-tag>
          <el-tag v-if="scope.row.courseType===2||scope.row.courseType===4||scope.row.courseType===6" type="success">继续教育</el-tag>
        </template>
      </el-table-column>-->


      <!--<el-table-column align="center" label="匹配课程" prop="courseType" width="180px">-->
      <!--<template slot-scope="scope">-->
      <!--<el-tag v-if="scope.row.courseType===1" type="primary">主要负责人新取证</el-tag>-->
      <!--<el-tag v-if="scope.row.courseType===2" type="primary">主要负责人继续教育</el-tag>-->
      <!--<el-tag v-if="scope.row.courseType===3" type="success">管理人员新取证</el-tag>-->
      <!--<el-tag v-if="scope.row.courseType===4" type="success">管理人员继续教育</el-tag>-->
      <!--<el-tag v-if="scope.row.courseType===5" type="info">从业人员新取证</el-tag>-->
      <!--<el-tag v-if="scope.row.courseType===6" type="info">从业人员继续教育</el-tag>-->
      <!--</template>-->
      <!--</el-table-column>-->

      <!--<el-table-column align="center" label="章节名称" prop="zhangJieName"/>-->
      <el-table-column align="center" label="章节名称" prop="chapterName">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
            <span class="zhangjie-span" slot="reference">{{ scope.row.chapterName }}</span>
            <span>{{ scope.row.chapterName }}</span>
          </el-popover>
        </template>
      </el-table-column>

      <!--<el-table-column align="center" label="创建时间" prop="createDate"/>-->
      <el-table-column align="center" label="操作" fixed="right" width="120px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="small" @click="handleCertificate(scope.row)">查询证书</el-button> -->
          <el-button type="primary" style="margin-left: 0;margin-bottom: 10px;width: 80px;" size="mini"
            @click="handleUpdate(scope.row)">编辑学员</el-button>
          <!--<el-button  type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>-->
          <el-button type="danger" size="mini" style="margin-left: 0;margin-bottom: 10px;width: 80px;"
            @click="$refs.checkCompany.open(scope.row)">更换企业</el-button>
          <el-button type="danger" size="mini" style="margin-left: 0;margin-bottom: 10px;width: 80px;"
            @click="$refs.checkCourse.open(scope.row)">更换课程</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- <el-button class="filter-item" type="success" icon="el-icon-edit" @click="batchStudentOrderUpdate">批量缴费</el-button> -->
    <!-- <el-button class="filter-item" type="success" icon="el-icon-edit" @click="queryPayStatusAll">全部缴费</el-button> -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px"
      :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="学员姓名" prop="name">
          <el-input v-model="dataForm.name" />
        </el-form-item>
        <!--<el-form-item label="昵称" prop="nickName">-->
        <!--<el-input v-model="dataForm.nickName"/>-->
        <!--</el-form-item>-->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="dataForm.phone" type="number" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="dataForm.gender" clearable placeholder="请选择">
            <el-option :value="1" label="男" />
            <el-option :value="2" label="女" />
          </el-select>
        </el-form-item>

        <!--<el-form-item label="生日" prop="birthday">-->
        <!--<el-date-picker-->
        <!--v-model="dataForm.birthday"-->
        <!--type="date"-->
        <!--placeholder="选择日期"-->
        <!--format="yyyy 年 MM 月 dd 日"-->
        <!--value-format="yyyy-MM-dd"/>-->
        <!--</el-form-item>-->
        <el-form-item label="公司地址" @change="chosePwd">
          <span
            v-if="dataForm.provinceName">{{ dataForm.provinceName+'/'+dataForm.cityName+'/'+dataForm.areaName }}</span>
          <span v-else>暂无</span>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard" @change="chosePwd">
          <el-input v-model="dataForm.idCard" />
        </el-form-item>
        <el-form-item label="学员密码" prop="lognPasswd">
          <el-input v-model="dataForm.lognPasswd" disabled />
        </el-form-item>
        <el-form-item label="学员类型" prop="studentsType" v-if="selectTF">
          <el-select v-model="dataForm.studentsType" @change="selectItem" clearable placeholder="请选择">
            <el-option :value="1" label="主要负责人" />
            <el-option :value="2" label="管理人员" />
            <el-option :value="3" label="从业人员" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型" prop="courseType" v-if="selectTF">
          <el-select v-model="dataForm.courseType" clearable placeholder="请选择">
            <el-option :value="1" v-show="dataForm.studentsType==1" label="主要负责人新取证" />
            <el-option :value="2" v-show="dataForm.studentsType==1" label="主要负责人继续教育" />
            <el-option :value="3" v-show="dataForm.studentsType==2" label="管理人员新取证" />
            <el-option :value="4" v-show="dataForm.studentsType==2" label="管理人员继续教育" />
            <el-option :value="5" v-show="dataForm.studentsType==3" label="从业人员新取证" />
            <el-option :value="6" v-show="dataForm.studentsType==3" label="从业人员继续教育" />
          </el-select>
        </el-form-item>
        <el-form-item label="学员类型" prop="studentsType" v-if="!selectTF">
          <el-select v-model="dataForm.studentsType" @change="selectItem" clearable placeholder="请选择">
            <el-option :value="1" label="主要负责人" />
            <el-option :value="2" label="管理人员" />
            <el-option :value="3" label="从业人员" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程类型" prop="courseType" v-if="!selectTF">
          <el-select v-model="dataForm.courseType" clearable placeholder="请选择">
            <el-option :value="1" v-show="dataForm.studentsType==1" label="主要负责人新取证" />
            <el-option :value="2" v-show="dataForm.studentsType==1" label="主要负责人继续教育" />
            <el-option :value="3" v-show="dataForm.studentsType==2" label="管理人员新取证" />
            <el-option :value="4" v-show="dataForm.studentsType==2" label="管理人员继续教育" />
            <el-option :value="5" v-show="dataForm.studentsType==3" label="从业人员新取证" />
            <el-option :value="6" v-show="dataForm.studentsType==3" label="从业人员继续教育" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否缴费" prop="gender">
          <el-select v-model="dataForm.payStatus" clearable placeholder="请选择">
            <el-option :value="0" label="未缴费" />
            <el-option :value="1" label="已缴费" />
          </el-select>
        </el-form-item>
        <el-form-item label="过期时间" v-if="dataForm.payStatus == 1" prop="expireTime">
          <el-date-picker v-model="expireTime" style="width: 100%;" type="datetime" placeholder="选择日期" />
        </el-form-item>
        <!--<el-form-item label="学员地址" prop="address">-->
        <!--<el-input v-model="dataForm.address"/>-->
        <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button size="mini" v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

    <!-- 预览对话框 -->
    <div class="certificate-fixed">
      <el-dialog :visible.sync="dialogFormVisibleCertificate" :close-on-click-modal="false" title="">
        <div class="certificate-div" ref="imageDom">
          <h1 class="certificate-h1">{{ queryCertDataForm.certName }}</h1>
          <h2 class="certificate-h2">证书编号{{ queryCertDataForm.certCode }}</h2>
          <p class="certificate-p">{{ queryCertDataForm.certContent }}</p>
          <div class="certificate-flex">
            <div class="certificate-div1">
              <!-- <img src="../../assets/images/certificate/ewm.png" alt="">
            <img :src="queryCertDataForm.certUrl" alt="">
            <p class="certificate-p1">扫描二维码查看</p> -->
            </div>
            <div class="certificate-div2">
              <img src="../../assets/images/certificate/zhang.png" alt="">
              <p class="certificate-p1">贵州明德工程咨询有限公司培训中心</p>
              <p class="certificate-p2">{{queryCertDataForm.createTime}}</p>
            </div>
          </div>

        </div>
        <div class="certificate-div3" @click="clickGeneratePicture()">
          生成图片
        </div>
        <div class="certificate-div4" @click="saveTF=false" v-if="saveTF">
          <h1>右键点击图片保存</h1>
          <img :src="imgUrl" alt="">
        </div>
      </el-dialog>
    </div>


    <!-- 导入学员信息-->
    <el-dialog :visible.sync="createDialogVisible1" :close-on-click-modal="false" title="导入用户信息">
      <el-upload :show-file-list="true" :limit="5" :multiple="true" :http-request="handleUploadStudent" action="#"
        list-type="picture">
        <el-button size="mini" type="primary">点击导入</el-button>
      </el-upload>
    </el-dialog>
    <checkCompany ref="checkCompany" @updateData="updateDataSubmit" />
    <checkCourse ref="checkCourse" @updateData="updateDataSubmit" />
    <edit ref="edit" @updateData="updateDataEdit" />
  </div>
</template>

<style>
  .certificate-fixed .el-dialog {
    width: 500px;

  }

  .zhangjie-span {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }

  .certificate-div3 {
    width: 80%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #20a0ff;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
  }

  .certificate-div4 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;
  }

  .certificate-div4 img {
    width: 400px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

  }

  .certificate-div4 h1 {
    color: #fff;
    font-weight: 500;
    width: 100%;
    margin-top: 30px;
    text-align: center;

  }

  .certificate-div {
    width: 400px;
    display: block;
    margin: 0 auto;
    height: 551px;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/certificate/bgcer.png);
    background-size: 100% auto;
  }

  .certificate-div .certificate-h1 {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-top: 80px;
  }

  .certificate-div .certificate-h2 {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
  }

  .certificate-div .certificate-p {
    text-align: left;
    padding: 0 30px;
    line-height: 26px;
    font-size: 14px;
    margin-top: 30px;
  }

  .certificate-flex {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
  }

  .certificate-div1 {
    width: 118px;
    margin-left: 32px;
  }

  .certificate-div1 img {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .certificate-div1 p {
    text-align: center;
  }

  .certificate-div2 {
    width: 144px;
    position: relative;
    margin-right: 40px;
    height: 136px;
  }

  .certificate-div2 img {
    width: 85%;
    position: absolute;
    right: 0;
    top: 0;
  }

  .certificate-div2 .certificate-p1 {
    position: absolute;
    bottom: 30px;
    right: 0;
  }

  .certificate-div2 .certificate-p2 {
    position: absolute;
    bottom: 0px;
    right: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .active {
    background-color: #1e6abc;
    color: white;
  }

  .certDiv {
    margin-bottom: 20px;
    font-size: 10px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>

<script>
  import html2canvas from "html2canvas"
  import {
    studentlist,
    studentupdate,
    batchUpdate
  } from '@/api/student.js'
  import {
    uploadPath
  } from '@/api/storage'
  import {
    getToken
  } from '@/utils/auth'
  import defCity from '@/components/BaseCity/defCity'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkCompany from './componments/checkCompany.vue'
  import checkCourse from './componments/checkCourse.vue'
  import edit from './componments/edit.vue'
  import {
    listCompany,
    createCompany,
    updateCompany,
    deleteCompany,
    changePwd,
    register,
    queryCompanyInfo,
    companycreateStudent,
    queryCourseRecord
  } from '@/api/company'
  export default {
    name: 'CompanyOrder',
    components: {
      Pagination,
      defCity,
      checkCompany,
      checkCourse,
      edit
    },
    data() {
      return {
        editType: 'one',
        companyData: [],
        selectTF: true,
        saveTF: false,
        uploadPath,
        completeInfo: undefined,
        createDialogVisible1: false,
        updateParam: undefined,
        list: undefined,
        total: 0,
        listLoading: true,
        expireTime: undefined,
        listQuery: {
          id: undefined,
          companyId: undefined,
          name: undefined,
          phone: undefined,
          companyName: undefined,
          idCard: undefined,
          payStatus: undefined,
          certificateStatus: undefined,
          trainType: undefined,
          studentsType: undefined,
          courseType: undefined,
          page: 1,
          limit: 10,
          sort: 'id',
          order: 'desc'
        },
        queryCertParam: {
          studentsId: undefined,
        },
        queryCertDataForm: {
          certName: '',
          certCode: '',
          certContent: '',
          certCert: '',
          cteateTime: '',
          companyName: ''
        },
        queryPayStatus: {
          payStatus: 0
        }, // 未缴费
        dataForm: {
          id: undefined,
          companyId: undefined,
          companyName: undefined,
          name: undefined,
          nickName: undefined,
          phone: undefined,
          iconUrl: undefined,
          gender: undefined,
          birthday: undefined,
          expireTime: undefined,
          idCard: undefined,
          associatedIndustryId: undefined,
          payStatus: undefined,
          certificate: undefined,
          certificateStatus: undefined,
          studentsType: undefined,
          courseType: undefined,
          address: undefined,
          deleteMark: undefined,
          createDate: undefined,
          studentsId: undefined,
          lognPasswd: undefined,
          certName: undefined,
          certCode: undefined,
          certContent: undefined,
          certUrl: undefined
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        imgUrl: '',
        rules: {
          name: [{
            required: true,
            message: '学员姓名不能为空',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '学员电话不能为空',
            trigger: 'blur'
          }],
          idCard: [{
            required: true,
            message: '学员身份证不能为空',
            trigger: 'blur'
          }],
          studentsType: [{
            required: true,
            message: '学员类型不能为空',
            trigger: 'blur'
          }],

          // lognPasswd: [
          //   { required: true, message: '学员登录密码不能为空', trigger: 'blur' }
          // ],
          courseType: [{
            required: true,
            message: '课程类型不能为空',
            trigger: 'blur'
          }]

        },
        downloadLoading: false,
        seclectType: '',
        tags: [{
            name: '全部',
            cid: ''
          },
          {
            name: '主要负责人新取证',
            cid: 1
          },
          {
            name: '主要负责人继续教育',
            cid: 2
          },
          {
            name: '管理人员新取证',
            cid: 3
          },
          {
            name: '管理人员继续教育',
            cid: 4
          },
          {
            name: '从业人员新取证',
            cid: 5
          },
          {
            name: '从业人员继续教育',
            cid: 6
          }
        ],
        bgindex: -1,
        dialogFormVisibleCertificate: false,
        batchStudentOrderSelection: [],
        dialogFormVisibleBatchStudentOrder: undefined,
        starLevelStatus: undefined,
        selectAll: []
      }
    },
    computed: {
      headers() {
        return {
          'X-Litemall-Admin-Token': getToken()
        }
      }
    },
    created() {
      if (this.$route.query.companyId) {
        this.listQuery.companyId = this.$route.query.companyId
      }
      this.init()
    },
    methods: {
      updateDataEdit (e) {
        console.log(e)

        let data = {
          ...e,
          idList: []
        }
        this.selectAll.filter(res => {
          data.idList.push(res.id)
        })
        batchUpdate(data)
          .then(() => {
            this.$refs.edit.close()
            this.$notify.success({
              title: '成功',
              message: '更新成功'
            })
            this.init()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      cityDataFun(e) {
        this.listQuery.provinceName = e.province.label
        this.listQuery.cityName = e.city.label
        this.listQuery.areaName = e.area.label
      },
      getCompanyList() {
        listCompany({
            page: 1,
            limit: 1000000
          })
          .then(response => {
            this.companyData = response.data.data.items
          })
          .catch(() => {})
      },
      timeUtil(time) {
        let timeStr = '';
        let stringFormat = (i) => {
          return i < 10 ? `0${i}` : `${i}`;
        }
        let minuteTime = 0;
        let secondTime = 0;
        let hourTime = 0;
        if (time < 60) {
          timeStr = `00:${stringFormat(time)}`
        } else if (time >= 60 && time < 3600) {
          minuteTime = parseInt(time / 60);
          secondTime = parseInt(time % 60);
          timeStr = `${stringFormat(minuteTime)}:${stringFormat(secondTime)}`;
        } else if (time >= 3600) {
          let _t = parseInt(time % 3600);
          hourTime = parseInt(time / 3600);
          minuteTime = parseInt(_t / 60);
          secondTime = parseInt(_t % 60);
          timeStr = `${stringFormat(hourTime)}:${stringFormat(minuteTime)}:${stringFormat(secondTime)}`
        }
        return timeStr;
      },
      selectItem(type) {
        this.seclectType = type;
        console.log(this.seclectType)
      },
      // 转成图片，生成图片地址
      clickGeneratePicture() {
        html2canvas(this.$refs.imageDom).then(canvas => {
          this.imgUrl = canvas.toDataURL("image/png");
          this.saveTF = true;
          console.log(this.imgUrl)
        });
      },
      // 标签类事件
      tagclick(cid, index) {
        if (this.bgindex === index) {
          this.bgindex = -1
          this.listQuery.courseType = ''
          this.getList()
        } else {
          this.bgindex = index
          this.listQuery.courseType = cid
          this.getList()
        }
      },
      // 初始化参数
      init: function() {
        this.getList()
        this.getCompanyList()
      },
      getList() {
        this.listLoading = true
        this.listQuery.pageSize = this.listQuery.limit
        this.listQuery.currentPage = this.listQuery.page
        if (this.listQuery.name === '') {
          this.listQuery.name = undefined
        }
        if (this.listQuery.phone === '') {
          this.listQuery.phone = undefined
        }
        if (this.listQuery.payStatus === '') {
          this.listQuery.payStatus = undefined
        }
        if (this.listQuery.courseStatus === '') {
          this.listQuery.courseStatus = undefined
        }
        if (this.listQuery.idCard === '') {
          this.listQuery.idCard = undefined
        }
        if (this.listQuery.certificateStatus === '') {
          this.listQuery.certificateStatus = undefined
        }
        studentlist(this.listQuery)
          .then(response => {
            console.log()
            this.list = response.data.data.data.map(res => {
              return {
                ...res,
                duration: this.timeUtil(res.duration),
                totalDuration: this.timeUtil(res.totalDuration),
                expireTime: this.formatDate(new Date(res.expireTime))
              }
            })
            this.completeInfo = response.data.data.object
            this.total = response.data.data.totalCount
            this.listLoading = false
            this.completeInfoFun()
          })
          .catch(() => {
            this.list = []
            this.completeInfo = 0 // 未完善
            this.total = 0
            this.listLoading = false
          })
      },
      restCertDataForm() {
        this.queryCertDataForm = {
          certName: '',
          certCode: '',
          certContent: '',
          certCert: '',
          cteateTime: '',
          companyName: ''
        }
      },

      queryCert() {
        queryCert(this.queryCertParam)
          .then(response => {
            this.queryCertDataForm = response.data.data
            if (response.data.data === undefined) {
              this.restCertDataForm()
            }
            this.listLoading = false

          })
          .catch(() => {
            // this.queryCertDataForm= undefined
            this.listLoading = false

          })
      },
      completeInfoFun() {
        if (this.completeInfo === 0) {
          this.$confirm('您的信息未完善, 是否跳转完善信息页面', '提示', {
            showClose: false,
            showCancelButton: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.getCompleteInfo()
            this.$message({
              type: 'success',
              message: '跳转完善信息页面'
            })
          }).catch(() => {
            this.getCompleteInfo()
            // this.$message({
            //
            //   type: 'info',
            //   message: '跳转失败'
            // })
          })
        }
      },
      chosePwd() {
        this.dataForm.lognPasswd = this.dataForm.idCard.substring(this.dataForm.idCard.length - 6)

      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      allEdit () {
        if (this.selectAll.length > 0) {
          this.$refs.edit.open()
        } else {
          this.$notify.error({
            title: '失败',
            message: '请勾选列表'
          })
        }
      },
      resetForm() {
        this.dataForm = {
          id: undefined,
          companyId: undefined,
          companyName: undefined,
          name: undefined,
          nickName: undefined,
          phone: undefined,
          iconUrl: undefined,
          gender: undefined,
          birthday: undefined,
          expireTime: undefined,
          idCard: undefined,
          associatedIndustryId: undefined,
          payStatus: undefined,
          certificate: undefined,
          certificateStatus: undefined,
          studentsType: undefined,
          courseType: undefined,
          address: undefined,
          lognPasswd: "123456",
          deleteMark: undefined,
          createDate: undefined
        }
      },
      handleCreate() {
        this.selectTF = true
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      uploadPicUrl: function(response) {
        this.dataForm.invoiceUrl = response.data.url
      },
      uploadPicUrl1: function(response) {
        this.dataForm.payEvidence = response.data.url
      },
      createData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            createCompanyStudent(this.dataForm)
              .then(response => {
                this.list.unshift(response.data.data)
                this.getList()
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '创建成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.message
                })
              })
          }
        })
      },
      handleUpdate(row) {
        this.selectTF = false;
        this.dataForm = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.expireTime = row.expireTime
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateDataSubmit(e) {
        studentupdate(e)
          .then(() => {
            if (e.type === 'company') {
              this.studentupdate({
                ...e,
                associatedIndustryId: e.categoryObj.id,
                categoryName: e.categoryObj.categoryName
              })
            } else {
              this.$notify.success({
                title: '成功',
                message: '更新成功'
              })
              this.init()
              this.$refs.checkCourse.close()
            }
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      studentupdate(e) {
        studentupdate(e)
          .then(() => {
            this.$notify.success({
              title: '成功',
              message: '更新成功'
            })
            this.$refs.checkCompany.close()
            this.init()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      },
      updateData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.dataForm.expireTime = this.expireTime
            studentupdate(this.dataForm)
              .then(() => {
                for (const v of this.list) {
                  if (v.id === this.dataForm.id) {
                    const index = this.list.indexOf(v)
                    this.list.splice(index, 1, this.dataForm)
                    break
                  }
                }
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '更新成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.message
                })
              })
          }
        })
      },
      handleCertificate(row) {
        // this.dataForm = Object.assign({}, row)
        this.queryCertParam.studentsId = row.id
        this.queryCert(this.queryCertParam)
        this.dialogFormVisibleCertificate = true
      },
      handleBatchStudentOrderChange(val) {
        console.log(val)
        this.selectAll = val
        this.batchStudentOrderSelection = val
      },
      batchStudentOrderUpdate() {
        if (this.batchStudentOrderSelection.length <= 0) {
          this.$confirm('当前没有批量缴费学员，请先勾选左侧栏多选框！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          // console.log( this.batchStudentOrderSelection[0].payStatus)
          for (var i = 0; i < this.batchStudentOrderSelection.length; i++) {
            // console.log("+--------------------" +this.batchStudentOrderSelection[i].payStatus)
            if (this.batchStudentOrderSelection[i].payStatus == 1) {
              this.$confirm('有已缴费的学员请重新选择', '提示', {
                showClose: false,
                showCancelButton: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              return
            }
          }
          // this.dialogFormVisibleBatchStudentOrder = true
          // this.getStudentOrder() // 跳转订单页面
          this.$confirm('是否批量缴费?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.getStudentOrder() // 跳转订单页面
            this.$message({
              type: 'success',
              message: '跳转批量缴费页面成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '跳转订单页面失败'
            })
          })
        }
      },
      queryPayStatusAll() {
        queryPayStatustCompanyStudent(this.queryPayStatus)
          .then(response => {
            this.batchStudentOrderSelection = response.data.data.items
          })
        this.$confirm('是否全部缴费（未缴费的学员）?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.getStudentOrder() // 跳转订单页面
            this.$message({
              type: 'success',
              message: '跳转批量缴费页面成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '跳转订单页面失败'
            })
          })
          .catch(() => {
            this.list = []
          })
      },
      formatDate(date) {
        let Y = date.getFullYear(); // 获取完整的年份(4位,1970)
        let M = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
        let D = date.getDate(); // 获取日(1-31)
        return `${Y}-${M}-${D}`
      },
      handleCreateExcelStudent() {
        this.createDialogVisible1 = true
      },
      handleUploadStudent(item) {
        const formData = new FormData()
        formData.append('file', item.file)

        importStudents(formData)
          // this.getList()
          // this.createDialogVisible1 = false
          .then(response => {
            if (response.data.data === 1) {
              this.$message.success('导入成功')
              this.getList()
              this.createDialogVisible1 = false
            }
          }).catch(response => {
            this.$message.error(response.data.message)
          })
      },
      handleDownload() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['序号', '姓名', '电话号码', '身份证', '费用', '学时', '缴费情况', '取证情况', '匹配课程', '章节名称']
          const filterVal = ['number', 'name', 'phone', 'idCard', 'price', 'studyTime', 'payStatusString',
            'certificateStatusString', 'courseTypeInfoString', 'zhangJieName'
          ]
          excel.export_json_to_excel2(tHeader, this.list, filterVal, '学员信息')
          this.downloadLoading = false
        })
      },
      getStudentOrder() {
        this.$router.push({
          path: '/companyOperateManage/companyBatchOrder',
          query: {
            param: JSON.stringify(this.batchStudentOrderSelection)
          }
        })
      },
      getCompleteInfo() {
        this.$router.push({
          path: '/companyOperateManage/completeInfo'
        })
      }
    }
  }
</script>
